<template>
    <div>
        <div class="relation-table">
            <el-table :data="pointList" border :height="height" >
                <el-table-column prop="pointName" label="测点" align="center"></el-table-column>
                <el-table-column prop="Point" label="Point" align="center">
                    <template slot-scope="scope">
                        <span>{{scope.row.instrumentPOINT.Point}}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="PointName" label="Point名称" align="center">
                    <template slot-scope="scope">
                        <span>{{scope.row.instrumentPOINT.PointName}}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="point_Valve" label="关联" align="center" width="200">
                    <template slot-scope="scope">
                        <span v-if="scope.row.point_Valve && scope.row.point_Valve.PointName">{{scope.row.point_Valve.PointName}}</span>
                        <span v-else class="no-association">未关联</span>

                        <el-tooltip :content="showRoleEdit == 0 ? '无修改权限' :'关联设置'" placement="top">
                            <el-button type="primary" size="mini" icon="el-icon-s-tools" @click="handleEditList(scope.row)" style="padding:5px;margin-left:10px" :disabled="showRoleEdit == 0"></el-button>
                        </el-tooltip>
                    </template>
                </el-table-column>
                <div slot="empty">
                    <noData showData />
                </div>
            </el-table>
        </div>

        <el-dialog title="测点选择" :visible.sync="listDialog" width="400px" v-dialogDrag :modal="modal">
        <div class="tree-box">
          <el-select v-model="selectTreeType" placeholder="请选择" size="small" @change="handleChangeTreeType">
              <el-option v-for="(item,index) in treeTypeList" :key="index" :label="item" :value="item"></el-option>
            </el-select>
          </div>
          <div class="tree">
           <treeMenu :treeData="dialogMenu" name="lable" ref="treeMenu" nodeKey="id" @menuLeftClick="handleNodeClickDialog"/>
        </div>
        <div class="dialog-footer">
            <el-button @click="listDialog = false" size="small" icon="el-icon-circle-close" class="cancel-btn">取消</el-button>
            <el-button type="primary" @click="handleSaveList" size="small" icon="el-icon-circle-check" class="confirm-btn">保存配置</el-button>
          </div>
        </el-dialog> 
    </div>
</template>
<script>
import {GetTreeInstr,GetTreeStyle,setPointValve } from '@/api/https'
import treeMenu from '@/components/base/treeMenu.vue'
import noData from '@/components/base/noData.vue'
export default {
    name:'calibrationTable',
    components:{treeMenu,noData},
    props:{
        height:{
            type:String,
            default:'200px'
        },
        pointList:{
            type:Array,
            default:()=>{
                return []
            }
        },
        modal:{
            type:Boolean,
            default:true
        },
        showRoleEdit:{
            type:Number,
            default:0
        }
    },
    data() {
        return{
            listDialog:false,
            selectTreeType:'',
            dialogMenu:[],
            treeTypeList:[],
            dialogForm:{},
            stationId:Number(sessionStorage.getItem('stationId'))
        }
    },
    methods:{
        handleChangeTreeType(val){
            this.selectTreeType = val
            this.handleGetTreeInstr()
        },
        handleGetTreeInstr(){
            GetTreeInstr(this.stationId,this.selectTreeType).then(res=>{
                if(res.isSuccess){
                    this.dialogMenu = res.data || []
                }else{
                    this.dialogMenu = []
                }
            })
        },
        handleGetTreeStyle(){
            GetTreeStyle(this.stationId).then(res=>{
                if(res.isSuccess && res.data && res.data.length > 0){
                    this.treeTypeList = res.data
                    this.selectTreeType = res.data[0]
                    this.handleGetTreeInstr()
                }else{
                    this.treeTypeList = []
                    this.selectTreeType = ''
                }
            });
        },
        handleEditList(data){
            if(data){
            this.dialogForm = {
                ID:0,
                CodeID:data.code_id,
                ValueName:data.instrumentPOINT.Point,
                InstrumentModelID:data.instrumentPOINT.InstrumentModelID,
                remark:'',
                PointName:''
            }
            }
            this.handleGetTreeStyle()
            this.listDialog = true
        },
        handleSaveList(){
            setPointValve(this.dialogForm).then(res=>{
                if(res.isSuccess){
                    this.dialogForm = {}
                    this.listDialog = false
                    this.$refs.treeMenu.$refs.tree.setCurrentKey(null);
                    this.$emit('update')
                }else{
                    this.$message.error(res.errorMessage)
                }
            })
        },
        handleNodeClickDialog(data){
            this.dialogForm.ValueCodeID = data.codE_ID
        },
    }
}
</script>
<style scoped>
.tree{
    height: 540px;
    overflow: auto;
}
</style>